<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui Terminal 模拟弹窗</title>
    <!-- 引入layuiCSS -->
    <link rel="stylesheet" href="https://unpkg.com/layui@2.7.6/dist/css/layui.css">
    <style>
        .terminal-modal {
            background: #181818;
            color: #06ed63;
            padding: 20px 10px 10px 10px;
            border-radius: 5px;
            min-height: 200px;
            height: 320px;
            font-family: monospace;
            overflow-y: auto;
        }
        .terminal-output {white-space: pre-wrap;}
        .terminal-input-area {
            display: flex;
            margin-top: 15px;
        }
        .terminal-input {
            flex: 1;
            background: #222; color: #bcffad;
            border: 1px solid #555; outline: none;
            padding: 4px 8px;
            font-size: 1em;
            font-family: monospace;
        }
        .send-command-btn {margin-left: 5px;}
    </style>
</head>
<body>
    <button class="layui-btn" onclick="TerminalModal.open()"> 打开终端 </button>

    <!-- layui & jquery -->
    <script src="https://unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
class TerminalModal {
    static layerIndex = null;
    static outputHistory = "";

    static open() {
        if (this.layerIndex !== null) return; // 不重复打开
        this.outputHistory = "欢迎使用模拟终端！（输入help试试）\n";
        this.layerIndex = layui.layer.open({
            type: 1,
            area: ['650px', '400px'],
            title: "临时终端",
            shadeClose: true,
            end: () => {this.layerIndex = null;},
            content: this.buildHtml(),
            success: () => {
                this.updateOutput();
                let $input = $('.terminal-input');
                $input.focus();
                $input.on('keydown', (e) => {
                    if (e.key === 'Enter') {
                        TerminalModal.sendCommand();
                    }
                });
            }
        });
    }

    static buildHtml() {
        return `
        <div class="terminal-modal">
            <div class="terminal-output" id="terminal-output"></div>
            <div class="terminal-input-area">
                <input class="terminal-input" placeholder="输入指令..."/>
                <button type="button" class="layui-btn layui-btn-primary send-command-btn" onclick="TerminalModal.sendCommand()">发送</button>
            </div>
        </div>
        `;
    }

    static updateOutput() {
        $('#terminal-output').text(this.outputHistory);
        let modal = document.querySelector('.terminal-modal');
        if (modal) modal.scrollTop = modal.scrollHeight;
    }

    // 此处插入与后端通信的逻辑，Ajax或SocketIO
    static sendCommand() {
        let $input = $('.terminal-input');
        let command = $input.val().trim();
        if (!command) return;
        
        // 显示指令
        this.outputHistory += "\n$ " + command + "\n";
        this.updateOutput();

        // ########## 处理与后端交互 start ##########
        // 这里只模拟回显，实际你可替换为AJAX/SocketIO通信
        setTimeout(() => {
            // 模拟返回
            let fake_result = "（这里是后端返回的执行结果）";
            this.outputHistory += fake_result + '\n';
            this.updateOutput();
        }, 600);

        // AJAX/SocketIO例子 (你可以替换)
        /*
        $.post('/api/terminal', {cmd: command}, function(res){
             TerminalModal.outputHistory += res.data+'\n';
             TerminalModal.updateOutput();
        });
        */

        $input.val('');
    }
}
    </script>
</body>
</html>